// import { THEME_CUS } from "./mapStyle.js";

export const initMap = function () {
  //   console.log("baidu map");
  //1、 基本配置
  // const BMap = window.BMap;
  // [3d]
  const BMap = window.BMapGL;

  //实例化，并设置最大最小缩放层级
  const map = new BMap.Map("bMap", {
    minZoom: 5,
    maxZoom: 15,
  });
  //清楚覆盖物
  map.clearOverlays();
  //设置中心点、默认缩放层级
  // map.centerAndZoom(new BMap.Point(120.08469, 30.301904), 15);
  // [3d]
  // var point = new BMap.Point(120.08469, 30.301904);
  var point = new BMap.Point(118.281999, 35.108257);
  map.centerAndZoom(point, 14);

  map.addControl(
    new BMap.NavigationControl({
      anchor: BMAP_ANCHOR_TOP_RIGHT, //控件的停靠位置
      type: BMAP_NAVIGATION_CONTROL_ZOOM,
    })
  );
  // map.addControl(new BMap.ScaleControl());
  // map.addControl(new BMap.OverviewMapControl());
  // map.addControl(new BMap.MapTypeControl());
  //可以鼠标缩放
  map.enableScrollWheelZoom(false);

  // const icon = new BMap.Icon("/images/car12.png", new BMap.Size(32, 32)); //生成点标注
  // const marker = new BMap.Marker(point, { icon: icon });
  // // const marker = new BMap.Marker(point);
  // map.addOverlay(marker);

  // [3d]
  // map.setHeading(64.5);
  // map.setTilt(73);

  //2、 设置 默认主题 和 自定义主题
  // 默认主题 normal blueSky  light  dark  googlelite  grassgreen  midnight  pink  bluish  grayscale
  // 还有几个默认主题，但是发现并不好使 // midnight
  // map.setMapStyle({
  //   style: "dark",
  // });
  map.setMapStyleV2({
    styleJson: [
      {
        featureType: "background",
        elementType: "geometry",
        stylers: { color: "#001631" },
      },
      {
        featureType: "water",
        elementType: "all",
        stylers: { color: "#173157" },
      },
      // 更多样式配置...
    ],
  });
  // [3d]
  // map.setMapStyleV2({
  //   // styleId: "0a58c04a6b572154ee27b068fcc1d527",
  //   styleId: "fc7e66e861e76b275f12126e527cee39",
  // });
  // map.setMapStyleV2({
  //   styleJson: THEME_CUS,
  // });

  // 自定义主题， http://lbsyun.baidu.com/custom/  自定义，完事导出json配置
  //   map.setMapStyle({
  //     styleJson: THEME_CUS,
  //   });

  // const points = [
  //   { lng: 120.03469, lat: 30.303904, infoWindow: "search", func: true },
  //   { lng: 120.088499, lat: 30.275182, infoWindow: "default" },
  //   { lng: 120.089249, lat: 30.317759, infoWindow: "InfoBox" },

  //   { lng: 120.161941, lat: 30.283073, infoWindow: "InfoBox" },
  //   { lng: 120.174941, lat: 30.275073, infoWindow: "InfoBox" },
  //   { lng: 120.186941, lat: 30.297073, infoWindow: "InfoBox" },
  //   { lng: 120.198941, lat: 30.299073, infoWindow: "InfoBox" },
  // ];
  // const markerClusterers = [];
  // points.forEach((item) => {
  //   //实例化点
  //   const point = new BMap.Point(item.lng, item.lat); //自定义点的样式
  //   // const icon = new BMap.Icon("./image/yellow.png", new BMap.Size(32, 32)); //生成点标注
  //   const icon = new BMap.Icon("/images/car12.png", new BMap.Size(32, 32)); //生成点标注
  //   const marker = new BMap.Marker(point, { icon: icon });
  //   //动画
  //   // marker.setAnimation(BMAP_ANIMATION_BOUNCE);
  //   //文字标签
  //   const label = new BMap.Label("苏ETU779", {
  //     offset: new BMap.Size(-20, -30),
  //   });
  //   label.setStyle({
  //     color: "#fff",
  //     backgroundColor: "rgb(51, 51, 51)",
  //     border: "0",
  //     padding: "2px 7px",
  //     overflowWrap: "break-word",
  //     opacity: "0.9",
  //     userSelect: "none",
  //     fontSize: "12px",
  //     height: "20px",
  //     lineHeight: "20px",
  //     fontFamily: "微软雅黑",
  //   });
  //   marker.setLabel(label); //绑定事件
  //   // if (item.func)
  //   //   marker.addEventListener("click", function () {
  //   //     alert("你好");
  //   //   });
  //   markerClusterers.push(marker); //添加点标注即添加覆盖物
  //   map.addOverlay(marker);
  // });

  // //清除覆盖物
  // if (window.markerClusterer) window.markerClusterer.clearMarkers();
  // // delete this.markerClusterer
  // window.markerClusterer = null;
  // // 聚合的实现
  // const size = new BMap.Size(48, 48);
  // window.markerClusterer = new window.BMapLib.MarkerClusterer(map, {
  //   markers: markerClusterers,
  // });

  window.mapInit = map;
  return map;
};

// export const clearMarkers = function () {
//   const mapInit = window.mapInit;
//   mapInit && mapInit.clearOverlays();
// };

export const createGuiJi = (map, pData) => {
  const BMap = window.BMapGL;
  // const BMap = window.BMap;

  const createMaker = function (point, iconSrc) {
    const icon = new BMap.Icon(
      // "/image/history/car12.png",
      iconSrc,
      // new BMap.Size(66, 86)
      new BMap.Size(26, 34)
    ); //生成点标注
    return new BMap.Marker(point, {
      icon: icon,
      // offset: new BMap.Size(15, 5),
      offset: new BMap.Size(2, -13),
    });
  };

  //清楚覆盖物
  map.clearOverlays();

  var points = [
    // new BMap.Point(118.281999, 35.108257),
    // new BMap.Point(118.0013, 35.55),
    // new BMap.Point(118.0016, 35.55),
    // new BMap.Point(118.002, 35.55),
    // new BMap.Point(118.003, 35.5505),
    // new BMap.Point(118.004, 35.55),
    // new BMap.Point(118.005, 35.55),
    // new BMap.Point(118.00505, 35.5498),
    // new BMap.Point(118.0051, 35.55),
    // new BMap.Point(118.00515, 35.55),
    // new BMap.Point(118.00525, 35.5504),
    // new BMap.Point(118.00537, 35.6495),
  ];

  if (pData && pData.length > 1) {
    // points = pData.map((item) => new BMap.Point(item.lon, item.lat));
    points = pData.map((item) => new BMap.Point(item.lon, item.lat));

    var start = points[0];
    var end = points[points.length - 1];
    const startIcon = createMaker(
      start,
      "https://vp.lsdjwl.com/biscreen2m/images/kai2.png"
      // "/images/kai2.png"
    );
    const endIcon = createMaker(
      end,
      "https://vp.lsdjwl.com/biscreen2m/images/jie2.png"
      // "/images/jie2.png"
    );
    map.addOverlay(startIcon);
    map.addOverlay(endIcon);

    map.setViewport(points);
    //连接所有点
    map.addOverlay(
      new BMap.Polyline(points, {
        strokeColor: "#0072FFFF",
        strokeWeight: 5,
        strokeOpacity: 1,
      })
    );
  } else {
    //清楚覆盖物
    map.clearOverlays();
  }

  // //通过DrivingRoute获取一条路线的point
  // var driving = new BMap.DrivingRoute(map);
  // var start = points[0];
  // var end = points[points.length - 1];
  // driving.search(
  //   // new BMap.Point(114.001, 22.55),
  //   // new BMap.Point(113.951, 22.55)
  //   start,
  //   end
  // );
  // driving.setSearchCompleteCallback(function () {
  //   //得到路线上的所有point
  //   points = driving.getResults().getPlan(0).getRoute(0).getPath();
  //   if (points.length > 10) {
  //     const startIcon = createMaker(
  //       start,
  //       "https://vp.lsdjwl.com/biscreen/images/kai.png"
  //     );
  //     const endIcon = createMaker(
  //       end,
  //       "https://vp.lsdjwl.com/biscreen/images/jie.png"
  //     );
  //     map.addOverlay(startIcon);
  //     map.addOverlay(endIcon);
  //   }
  //   //画面移动到起点和终点的中间
  //   const centerPoint = new BMap.Point(
  //     (points[0].lng + points[points.length - 1].lng) / 2,
  //     (points[0].lat + points[points.length - 1].lat) / 2
  //   );
  //   // map.panTo(centerPoint);
  //   map.setViewport(points);
  //   //连接所有点
  //   map.addOverlay(
  //     new BMap.Polyline(points, {
  //       strokeColor: "#0072FFFF",
  //       strokeWeight: 5,
  //       strokeOpacity: 1,
  //     })
  //   );
  // });
};

export const clearGuiJi = (map) => {
  const BMap = window.BMapGL;
  if (map) {
    //清楚覆盖物
    map.clearOverlays();

    var point = new BMap.Point(118.281999, 35.108257);
    map.centerAndZoom(point, 13);
    // setTimeout(() => {
    //   map.mapTo(point);
    // }, 0);
  }
};
